<template>
  <div class="me_bg">
    <!-- 顶部背景 -->
    <div class="top_bg"></div>
    <!-- 头像和用户名 -->
    <div class="me_container">
      <div class="user_container" v-if="this.$store.state.islogin == 0">
        <img class="avatar" src="../assets/avatar2.png" alt="" /><br />
        <router-link to="/login" class="h1">请登录</router-link>
      </div>
      <div class="user_container h1" v-else>
        <img class="avatar" src="../assets/avatar.png" alt="" /><br />
        {{ this.$store.state.user.username }}
      </div>
      <!-- 小目录 -->
      <div class="list">
        <div class="small_item">
          <span class="font-w">{{ count }}</span
          ><br />
          收藏
        </div>
        <div class="small_item">
          <span class="font-w">0</span><br />
          作品
        </div>
        <div class="small_item">
          <span class="font-w">0</span><br />
          积分
        </div>
      </div>
      <!-- 目录 -->

      <div class="list">
        <router-link to="/collection">
          <div class="item">
            <img class="item_img" src="../assets/wdsc.png" alt="" />
            我的收藏
            <img class="right" src="../assets/right.png" alt="" />
          </div>
        </router-link>
        <hr class="hr" />
        <div class="item">
          <img class="item_img" src="../assets/fxhy.png" alt="" />
          分享好友
          <img class="right" src="../assets/right.png" alt="" />
        </div>
        <hr class="hr" />
        <div class="item">
          <img class="item_img" src="../assets/gywm.png" alt="" />
          关于我们
          <img class="right" src="../assets/right.png" alt="" />
        </div>
        <hr class="hr" />
        <div class="item">
          <img class="item_img" src="../assets/yjfk.png" alt="" />
          意见反馈
          <img class="right" src="../assets/right.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <mt-tabbar v-model="current" fixed>
      <mt-tab-item id="home">
        <img
          src="../assets/home_enable.png"
          slot="icon"
          v-if="current == 'home'"
        />
        <img src="../assets/home_disable.png" slot="icon" v-else />
        首页
      </mt-tab-item>
      <mt-tab-item id="classify">
        <img
          src="../assets/classify_enable.png"
          slot="icon"
          v-if="current == 'classify'"
        />
        <img src="../assets/classify_disable.png" slot="icon" v-else />
        分类
      </mt-tab-item>
      <mt-tab-item id="me">
        <img src="../assets/me_enable.png" slot="icon" v-if="current == 'me'" />
        <img src="../assets/me_disable.png" slot="icon" v-else />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style scoped>
.hr {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #eee;
}
.me_bg {
  background-color: #eee;
  height: 700px;
}
.small_item {
  display: inline-block;
  padding: 20px;
  margin-left: 28px;
  color: #666;
  text-align: center;
}
.font-w {
  font-weight: 600;
  color: black;
  display: inline-block;
  padding-bottom: 5px;
  font-size: 20px;
}
.list {
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.right {
  width: 20px;
  position: absolute;
  right: 10px;
  top: 20px;
}
.item_img {
  width: 20px;
  margin-right: 10px;
}
.item {
  padding: 20px;
  color: #000;
  position: relative;
}
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #e54d4236;
  color: #d81e06;
}
.top_bg {
  width: 100%;
  height: 220px;
  /* background: url(../assets/bg8.png); */
  background-color: #e54d42;
  /* border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px; */
}
.me_container {
  width: 90%;
  margin-left: 5%;
}
.user_container {
  margin-top: -180px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #e54d42;
  margin-bottom: 10px;
}
.h1 {
  font-size: 25px;
  font-weight: 700;
  color: #000;
}
.ul {
  margin-top: 20px;
  font: 20px;
  line-height: 30px;
  list-style: none;
}
.ul li {
  color: #000;
}
</style>
<script>
export default {
  data() {
    return {
      current: "me",
      avatar: "../assets/avatar.png",
      count: 0,
    };
  },
  mounted() {
    let id = this.$store.state.user.id;
    this.axios
      .get("/collect_show", {
        params: {
          id: id,
        },
      })
      .then((res) => {
        let result = res.data.result;
        this.count = result.length;
        console.log(this.count);
      });
  },

  watch: {
    current(value) {
      if (value == "home") {
        this.$router.push("/");
      } else if (value == "classify") {
        this.$router.push("/classify");
      } else if (value == "me") {
        this.$router.push("/me");
      }
    },
  },
  methods: {},
};
</script>